
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="js/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
        #btns>div{
            width:90%;
        }
        
        #edui1_iframeholder{
        	    height: 350px;
        }
        #nameInp{
        	height: 55px;
        	border: none;
        	font-size: 36px;
        	width: 1046px;
        	margin-left: 20px;
        }
        form{
        	background-color: #FFF;
        }
       
        #save{
        	width: 80px;
        	height: 36px;
        	border: 1px solid #E2E2E2;
        	border-radius: 8px;
        	background-color: #fff;
			position: absolute;
			top: 9px;        	
        	
        }
        #save:hover{
        	border: 1px solid #959FB0;
        }
        #eTimages{
        	position: absolute;
        	margin-left: 100px;
        	top: 16px;
        }
        #eTimages img{
        	width: 22px;
        	height: 22px;
        	margin-right: 6px;
        	
        }
		#edui1_iframeholder{
			height: 721px;
		}
    </style>
</head>
<body>
	<form>
		<div>
			<div id="eTop" style="height: 55px; position: relative;">
				 <input id="nameInp"/>
				 	<input type="button" value="保存" id="save" />
				 	<span id="eTimages">
				 		<img src="img/tra1.png" style="width: 20px; height: 20px;" onMouseOver="this.src='img/tra2.png'" onMouseOut="this.src='img/tra1.png'"/>
				 		<img src="img/share3.png" onMouseOver="this.src='img/share4.png'" onMouseOut="this.src='img/share3.png'"/>
				 		<img src="img/rad1.png" style="width: 24px; height: 24px;" onMouseOver="this.src='img/rad2.png'" onMouseOut="this.src='img/rad1.png'"/>
				 		<img src="img/note1.png" style="margin-right: 10px; width: 21px; height: 21px;" onMouseOver="this.src='img/note2.png'" onMouseOut="this.src='img/note1.png'"/>
				 		<img src="img/more3.png"  style="margin-right: 10px;" onMouseOver="this.src='img/more4.png'" onMouseOut="this.src='img/more3.png'"/>
				 		<img src="img/more1.png" style="width: 18px; height: 18px;" onMouseOver="this.src='img/more2.png'" onMouseOut="this.src='img/more1.png'"/>
				 	</span>
				 	
				
			</div>
		    <script id="editor" type="text/plain" style="width:94.1%;height:100%;"></script>
			<input id="hvhh" hidden="hidden">
		</div>
		<!--<div id="btns">
		    <div>
		        <button onclick="getAllHtml()">获得整个html的内容</button>
		        <button onclick="getContent()">获得内容</button>
		        <button onclick="setContent()">写入内容</button>
		        <button onclick="setContent(true)">追加内容</button>
		        <button onclick="getContentTxt()">获得纯文本</button>
		        <button onclick="getPlainTxt()">获得带格式的纯文本</button>
		        <button onclick="hasContent()">判断是否有内容</button>
		        <button onclick="setFocus()">使编辑器获得焦点</button>
		        <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
		        <button onmousedown="setblur(event)" >编辑器失去焦点</button>
		
		    </div>
		    <div>
		        <button onclick="getText()">获得当前选中的文本</button>
		        <button onclick="insertHtml()">插入给定的内容</button>
		        <button id="enable" onclick="setEnabled()">可以编辑</button>
		        <button onclick="setDisabled()">不可编辑</button>
		        <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
		        <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
		        <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
		    </div>
		
		    <div>
		        <button onclick="getLocalData()" >获取草稿箱内容</button>
		        <button onclick="clearLocalData()" >清空草稿箱</button>
		    </div>
		
		</div>-->
		<!--<div>
		    &lt;!&ndash;<button onclick="createEditor()">
		    创建编辑器</button>
		    <button onclick="deleteEditor()">
		    删除编辑器</button>&ndash;&gt;
		</div>-->
		
	</form>


<script type="text/javascript">
	var ue = UE.getEditor('editor', {
    toolbars: [
        [
            'undo', //撤销
            'cleardoc',//重做
            'removeformat',//清除格式
            'formatmatch',//格式刷
            'paragraph', //段落格式
            'fontfamily', //字体
            'fontsize', //字号
            'bold', //加粗
            'italic',//斜体
            'underline', //下划线
            'strikethrough',//删除线
            'forecolor', //字体颜色
            'backcolor',//字体背景颜色
            'insertunorderedlist',//无序列表
            'insertorderedlist',//项目排序
            'blockquote',//引用
            'insertcode',//代码块
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对
            'justifyjustify', //两端对齐
            'inserthtml',//插入html代码
            'justify',//对齐方式
            'indent',//缩进
            'inserttable', //插入表格
            'horizontal', //分隔线
            'link',//插入超链接
            'simpleupload', //单图上传
            'insertimage', //多图上传
            'attachment', //附件
            'emotion', //表情
            'inserttitle', //插入标题
            'selectall',//选中所有内容
            'music', //音乐
            'preview', //预览
            'insertvideo', //视频
            
            'fullscreen', //全屏
            'edittip ', //编辑提示
            'customstyle', //自定义标题
            'template', //模板
             ]
        ]
    });





    function isFocus(e){
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }
    function setblur(e){
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }
    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }
    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }
    function getAllHtml() {
        alert(UE.getEditor('editor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function setDisabled() {
        UE.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UE.getEditor('editor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UE.getEditor('editor').selection.getRange();
        range.select();
        var txt = UE.getEditor('editor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UE.getEditor('editor').getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UE.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UE.getEditor('editor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UE.getEditor('editor').destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData () {
        alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
    }

    function clearLocalData () {
        UE.getEditor('editor').execCommand( "clearlocaldata" );
        alert("已清空草稿箱")
    }



	$(function () {
		$.ajax({
			data:{
				id:sessionStorage.getItem("nId"),
				token:sessionStorage.getItem("accessToken"),
			},
			url:'http://localhost:9097/notes/searchNote',
			success:function (d) {
				$('#nameInp').val(d.notesName);

				ue.ready(function () {

					$('#hvhh').val(d.content==null?"":d.content);
					ue.setContent($('#hvhh').val())

				})

			}
		})

	})




	layui.use(['element', 'layer'], function () {
		var element = layui.element;
		var $ = layui.$;
		var layer = layui.layer;
		var label = $("#label");

		$('#save').click(function () {
					$.ajax({
						data:{
							id:sessionStorage.getItem("nId"),
							content:ue.getContent(),
							notesName:$('#nameInp').val(),
							token:sessionStorage.getItem("accessToken"),
						},
						url:'http://338de254.cpolar.io/note-notes/notes/updateContent',
						success:function (d) {
							if (d.rs) {
								parent.layer.msg('添加成功', {icon: 1});
								window.location.reload();
							}

						}
					});
				})


	});

</script>
</body>
</html>